<template>
  <div>
    <div class="conditionRow">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="姓名" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入姓名"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="手机号" prop="phone">
         <el-input
           v-model="queryParams.phone"
           placeholder="请输入手机号"
           clearable
           @keyup.enter.native="handleQuery"
           @change="handleQuery"
         />
       </el-form-item>
       <el-form-item label="创建时间">
         <el-date-picker
           v-model="dateRange"
           style="width: 240px"
           value-format="yyyy-MM-dd"
           type="daterange"
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           @change="timeChange"
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">清空条件</el-button>
         <el-button icon="el-icon-plus" size="mini" @click="addshop">新建</el-button>
       </el-form-item>
     </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;"
    >
      <el-table-column label="店铺名称" align="center" prop="shopName" :show-overflow-tooltip="true" />
      <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
      <el-table-column label="积分" align="center" prop="integral" :show-overflow-tooltip="true" />
      <el-table-column label="类型" align="center" prop="type" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createdTime" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            @click="handleForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >详情</el-button>
          <el-button
            :type="scope.row.status==1?'danger':'primary'"
            plain
            @click="changeStatusClick(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >{{scope.row.status==1?'冻结':'解封'}}</el-button>
          <el-button
            type="danger"
            plain
            @click="delForceLogout(scope.row)"
            v-hasPermi="['monitor:online:forceLogout']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      layout="total, prev, pager, next,sizes,jumper"
      @pagination="getList"
    />
    <!-- 新增/修改信息 -->
    <el-dialog :title="synthesform.id?'门店详情':'添加门店'" :visible.sync="openDetail" width="650px" append-to-body >
        <div class="synthesizebox">
            <el-form ref="form" :model="synthesform" label-width="120px">
              <el-form-item label="门店名称">
                <el-input v-model="synthesform.shopName"></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="synthesform.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="synthesform.phone" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="synthesform.shopAddress" @blur="addressBlur"></el-input>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="synthesform.shopNumber"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="synthesform.shopPassword"></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-radio-group v-model="synthesform.type">
                  <el-radio :label="item.name" v-for="(item,index) in TypeConfiglist" :key="index" >{{item.name}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="证件资料">
                <div class="uploaderrow">
                  <div class="lump" data-type="1" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        :limit="1"
                        :show-file-list="false"
                        list-type="picture-card"
                        :headers="headerObj"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-tooltip  v-if="synthesform.shopBusinessLicense" class="item" effect="dark" content="营业执照" placement="top">
                          <img :src="synthesform.shopBusinessLicense" class="avatar">
                        </el-tooltip>
                        <span v-else>营业执照</span>
                      </el-upload>
                  </div>
                  <div class="lump" data-type="2" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        :limit="1"
                        :show-file-list="false"
                        list-type="picture-card"
                        :headers="headerObj"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-tooltip  v-if="synthesform.shopIdentityCardFront" class="item" effect="dark" content="身份证正面" placement="top">
                          <img :src="synthesform.shopIdentityCardFront" class="avatar">
                        </el-tooltip>
                        <span v-else>身份证正面</span>
                      </el-upload>
                  </div>
                  <div class="lump" data-type="3" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        :limit="1"
                        :show-file-list="false"
                        list-type="picture-card"
                        :headers="headerObj"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-tooltip  v-if="synthesform.shopIdentityCardReverse" class="item" effect="dark" content="身份证背面" placement="top">
                          <img :src="synthesform.shopIdentityCardReverse" class="avatar">
                        </el-tooltip>
                        <span v-else>身份证背面</span>
                      </el-upload>
                  </div>
                  <div class="lump" data-type="4" @click.stop="avatarUploader">
                      <el-upload
                        class="avatar-uploader"
                        action="http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport"
                        accept="image/jpeg,image/jpg,image/png"
                        list-type="picture-card"
                        :headers="headerObj"
                        :file-list="shopImgList"
                        :on-success="handleAvatarSuccess"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload">
                          <span v-if="!shopImgList.length">其他资质</span>
                          <i v-else class="el-icon-plus"></i>
                      </el-upload>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
        </div>
    </el-dialog>

  </div>
</template>

<script>
  import { listShop, getShop, updateShop, delShop, addShop, typeConfigPageQuery } from "@/api/user/shop";
  import { getToken } from '@/utils/auth'
  export default {
      data(){
        return{
          // 显示搜索条件
          showSearch: true,
          // 查询参数
          queryParams: {
            currentPage: 1,
            pageSize: 10,
            name: null,
            phone: null,
            searchTimeBegin: null,
            searchTimeEnd: null
          },
          // 日期范围
          dateRange: [],
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 表格数据
          list: [],
          currentPage: 1,
          pageSize: 10,
          openDetail:false,
          synthesform:{
            shopName:null,
            name:null,
            phone:null,
            shopNumber:null,
            shopPassword:null,
            shopAddress:null,
            type:null,
            shopBusinessLicense:'', //证件资料-营业执照
            shopIdentityCardFront:'', //证件资料-身份证正面
            shopIdentityCardReverse:'', //证件资料-身份证反面
            latitude:null,  //纬度
            longitude:null,  //经度
          },
          shopImgList:[],
          headerObj: { Authorization: null },
          uploadLoading:null,
          formimgnum:0,
          TypeConfiglist:[]
        }
      },
      created() {
        this.headerObj.Authorization='Bearer '+getToken()
        this.getList();
        this.getTypeConfigPageQuery();
      },
      methods:{
        //根据地址获取经纬度
        addressBlur(){
          if(!this.synthesform.shopAddress) return
          this.$jsonp('http://api.map.baidu.com/geocoding/v3/', {
            address: this.synthesform.shopAddress,
            output: 'json',
            ak: 'RAFP4WWoO1f7XHznlZjibhzUBxGfYYGT'
          }).then(json => {
             // 得到我们想要的内容
             this.synthesform.latitude=json.result.location.lat
             this.synthesform.longitude=json.result.location.lng
          }).catch(err => {
            this.synthesform.latitude=null
            this.synthesform.longitude=null
            this.$message({
              message: "请正确填写地址",
              type: 'error'
            })
             console.log(err)
          })
        },
        //获取门店分类
        getTypeConfigPageQuery(){
          let queryParams={
            currentPage:1,
            pageSize:9999,
            type:"门店分类"
          }
          typeConfigPageQuery(queryParams).then(response => {
            this.TypeConfiglist = response.records;
            if(this.TypeConfiglist.length){
              this.synthesform.type=this.TypeConfiglist[0].name
            }
          });
        },
        //新建综合站
        addshop(){
          this.shopImgList=[]
          this.synthesform={
            shopName:null,
            name:null,
            phone:null,
            shopNumber:null,
            shopPassword:null,
            shopAddress:null,
            type:this.TypeConfiglist.length?this.TypeConfiglist[0].name:null,
            shopBusinessLicense:'', //证件资料-营业执照
            shopIdentityCardFront:'', //证件资料-身份证正面
            shopIdentityCardReverse:'', //证件资料-身份证反面
          }
          this.openDetail=true
        },
        avatarUploader(e){
          this.formimgnum=e.currentTarget.dataset.type
        },
        //删除门店
        delForceLogout(data){
          this.$confirm('是否将'+data.name+'账号删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            delShop(data.id).then(response => {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              setTimeout(()=>{
                this.getList();
              },1500)
            });
          }).catch(() => {});
        },
        //提交修改门店信息
        onSubmit() {
          for(let i in this.synthesform){
            if(!this.synthesform[i]){
              if(i=='shopName'){
                this.$message({
                  message: "请输入综合站名称",
                  type: 'error'
                })
                return
              }else if(i=='name'){
                this.$message({
                  message: "请输入站长姓名",
                  type: 'error'
                })
                return
              }else if(i=='phone'){
                this.$message({
                  message: "请输入手机号",
                  type: 'error'
                })
                return
              }else if(i=='shopNumber'){
                this.$message({
                  message: "请输入账号",
                  type: 'error'
                })
                return
              }else if(i=='shopPassword'){
                this.$message({
                  message: "请输入密码",
                  type: 'error'
                })
                return
              }else if(i=='shopAddress'){
                this.$message({
                  message: "请输入地址",
                  type: 'error'
                })
                return
              }else if(i=='latitude'){
                this.$message({
                  message: "请正确填写地址",
                  type: 'error'
                })
                return
              }else if(i=='shopBusinessLicense'){
                this.$message({
                  message: "请上传营业执照",
                  type: 'error'
                })
                return
              }else if(i=='shopIdentityCardFront'){
                this.$message({
                  message: "请上传身份证正面",
                  type: 'error'
                })
                return
              }else if(i=='shopIdentityCardReverse'){
                this.$message({
                  message: "请上传身份证反面",
                  type: 'error'
                })
                return
              }
            }
          }
          let shopImg	=[]
          for(let i in this.shopImgList){
            shopImg.push(this.shopImgList[i].url)
          }
          this.synthesform.shopImg=shopImg.join(",")
          if(this.synthesform.id){
            updateShop(this.synthesform).then(res=>{
              this.$message({
                message: "修改成功",
                type: 'success'
              })
              this.openDetail=false
              setTimeout(()=>{
                this.getList()
              },1500)
            })
          }else{
            addShop(this.synthesform).then(res=>{
              this.$message({
                message: "添加成功",
                type: 'success'
              })
              this.openDetail=false
              setTimeout(()=>{
                this.getList()
              },1500)
            })
          }
        },
        handleAvatarSuccess(res, file) {
          // this.imageUrl = URL.createObjectURL(file.raw);
          if(this.formimgnum==1){
            this.synthesform.shopBusinessLicense = res.data;
          }else if(this.formimgnum==2){
            this.synthesform.shopIdentityCardFront = res.data;
          }else if(this.formimgnum==3){
            this.synthesform.shopIdentityCardReverse = res.data;
          }else if(this.formimgnum==4){
            this.shopImgList.push({
              name:file.name,
              url:res.data
            })
          }
          this.uploadLoading.close();
        },
        handleRemove(file){
          for(let i in this.shopImgList){
            if(this.shopImgList[i].url==file.url){
              this.shopImgList.splice(i,1)
            }
          }
        },
        beforeAvatarUpload(file) {
         this.uploadLoading = this.$loading({
            lock: true,
            text: '上传中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
        },
        //冻结/解封
          changeStatusClick(data){
            this.$confirm('是否将'+data.shopName+'账号'+(data.status==1?'冻结？':'解封？'), '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {
              let queryParams={
                id:data.id,
                status:data.status==1?0:1
              }
              updateShop(queryParams).then(response => {
                this.$message({
                  type: 'success',
                  message: queryParams.status==1?'解封成功':'冻结成功'
                });
                setTimeout(()=>{
                  this.getList()
                },1500)
              });
            }).catch(() => {});
        },
        timeChange(time){
          if(time){
            this.queryParams.searchTimeBegin=time[0]
            this.queryParams.searchTimeEnd=time[1]
          }else{
            this.queryParams.searchTimeBegin=null
            this.queryParams.searchTimeEnd=null
          }
          this.handleQuery()
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          for(let i in this.queryParams){
            if(!this.queryParams[i]) this.queryParams[i]=null
          }
          listShop(this.queryParams).then(response => {
            this.list = response.records;
            this.total = response.total;
            this.loading = false;

          });
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.currentPage = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.queryParams.searchTimeBegin=''
          this.queryParams.searchTimeEnd=''
          this.dateRange=[]
          this.handleQuery();
        },
        handleForceLogout(data){
          getShop(data.id).then(response=>{
             this.synthesform=response.data
             this.shopImgList=[]
             if(this.synthesform.shopImg){
               let shopImg=this.synthesform.shopImg.split(",")
               for(let i=0;i<shopImg.length;i++){
                 this.shopImgList.push({
                   name:i,
                   url:shopImg[i]
                 })
               }
             }
             this.openDetail=true
          })
        },
      }
  }
</script>

<style lang="scss" scoped>
  .contbox{
    margin: 0 40px;
    .boxrow{
      display: flex;
      font-size: 14px;
      margin-bottom: 18px;
      color: #333;
      .name{
        font-weight: bold;
      }
      .tex{
        max-width: 350px;
      }
      .lump{
        display: flex;
        margin-right: 30px;
      }
      .img{
          max-width: 350px;
      }
      .userrow1{
        display: flex;
        align-items: center;
        .userimg{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .usertex{
          color: #333;
          font-size: 14px;
          margin-left: 20px;
        }
      }
    }
  }
  .synthesizebox{
    .avatar{
      width: 148px;
      height: 148px;
    }
    .uploaderrow{
      display: flex;
      flex-wrap: wrap;
      .lump{
        margin-right: 8px;
        margin-bottom: 10px;
      }
    }
    .el-radio{
      margin-bottom: 10px;
    }
  }
</style>
